<template>
  <div class="card-main">
    <a>
      <img :src="indexcard" alt />
    </a>
    <div class="card-lunbo">
      <div class="card-lunbo-box">
        <div
          class="box-item"
          v-for="(item,index) in goodLIst"
          :key="index"
          @click="goitem(item.id)"
        >
          <div class="box-pic">
            <a>
              <img :src="item.indexcardUrl" alt />
            </a>
          </div>
          <div class="box-info">
            <p class="box-name">
              <a>{{item.indexcardName}}</a>
            </p>
            <div class="box-price">
              <strong>￥{{item.indexcardPrice}}</strong>
              <i></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引用indexgoodApi接口
import indexgoodApi from "@/api/indexgoodApi";
export default {
  data() {
    return {
      goodLIst: []
      //   index: 0
    };
  },
  props: {
    index: Number,
    indexcard: String
  },

  components: {},

  methods: {
    goitem(id) {
      //console.log(id);
      this.$router.push("/home/indexcardList?" + id);
    }
  },
  created() {
    indexgoodApi
      .getGood(this.index)
      .then(res => {
        res.data;
        // console.log(res.data.data);
        this.goodLIst = res.data.data;
        // console.log(this.goodLIst, "!!!");
      })
      .catch(err => {
        console.log(err);
      });
    // console.log(indexgoodApi.getGood());
  }
};
</script>

<style lang="scss" scoped>
.card-main {
  width: 100%;
  position: relative;
  background: #fff;
  a {
    width: 100%;
    height: 1.06rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .card-lunbo {
    width: 100%;
    overflow: hidden;
    .card-lunbo-box {
      overflow-x: scroll;
      overflow-y: hidden;
      box-sizing: border-box;
      width: 100%;
      padding-bottom: 0.1rem;
      white-space: nowrap;
      padding-left: 0.1rem;
      .box-item {
        display: inline-block;
        background: #fff;
        margin-right: 0.085rem;
        border-radius: 0.08rem;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        vertical-align: middle;
        .box-pic {
          position: relative;
          width: 1.06rem;
          height: 1.06rem;
          a {
            display: inline-block;
            img {
              width: 1.06rem;
              height: 1.06rem;
              border-radius: 0.02rem 0.02rem 0 0;
            }
          }
        }
        .box-info {
          position: relative;
          box-sizing: border-box;
          width: 106px;
          text-align: left;
          padding-left: 0;
          padding: 0.07rem;
          .box-name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 11px;
            a {
              color: #333;
            }
          }
          .box-price {
            margin-top: 0.03rem;
            height: 17px;
            line-height: 17px;
            font-size: 11px;
            color: #8d8a8a;
            strong {
              margin-right: 2px;
              font-size: 0.12px;
              font-weight: bold;
              color: #fb3d3d;
            }
            i {
              width: 17px;
              height: 17px;
              background: url("../../assets/img/indexcart.png") no-repeat;
              background-size: 100% 100%;
              float: right;
              border-radius: 50%;
              background-color: #01b27a;
            }
          }
        }
      }
    }
  }
}
</style>